<template>
  <view class="message-page">
    <view class="message-list">
      <view v-for="(message, index) in messages" :key="index" @click="toggleReadStatus(index)" class="message-item">
        <view class="content">{{ message.content }}</view>
        <view class="time">{{ message.time }}</view>
        <view v-if="!message.read" class="dot"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        {
          content: '你的请假申请审批已通过',
          time: '10 minutes ago',
          read: false
        },
        {
          content: '你的请假申请审批未通过',
          time: '10 minutes ago',
          read: false
        }
      ]
    };
  },
  methods: {
    toggleReadStatus(index) {
      this.messages[index].read = true;
      uni.navigateTo({
        url: '/subpages/askrecord/askrecord'
      });
    }
  }
};
</script>

<style>
	/* 样式根据需求自行调整 */
	.message-page {
		padding: 20px;
	}

	.unread-indicator {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: red;
	}

	.message-list {
		margin-top: 20px;
	}

	.message-item {
		position: relative;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.content {
		font-size: 14px;
		line-height: 1.5;
		margin-bottom: 10px;
	}

	.time {
		font-size: 12px;
		color: #999;
	}
	
	.dot {
	  width: 10px;
	  height: 10px;
	  background-color: red;
	  border-radius: 50%;
	  position: absolute;
	  top: 10px;
	  right: 10px;
	}
</style>